<template>
  <div class="app-container flex flex-column" style="gap: 10px">
    <div style="height: 70px;background-color: #FFFFFF;padding: 10px;border-radius: 5px;">
    <div class="flex align-center justify-content-space-between" >
      <div>
        <div style="font-weight: bolder;font-size: 18px">科室主治医生绩效管理系统</div>
        <div style="font-size: 12px">基于多维模型的公平性绩效评估体系</div>
      </div>
      <div class="flex align-center">
        <el-input style="margin-right: 10px;width: 220px;" v-model="doctorName" placeholder="搜索医生" clearable prefix-icon="Search"  />
        <el-date-picker style="width: 140px;" v-model="date" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>
    </div>

    </div>
    <div class="flex-auto flex justify-content-space-between" style="gap: 10px">
      <div class="left-box  flex flex-column" style="width:420px">
        <div class="title">
          <span>医生绩效排名</span>
          <span class="total-score">总分</span>
        </div>
        <div height="calc(100vh - 280px)">
         <el-table :data="doctorList" style="width: 100%"  height="calc(100vh - 280px)">
           <el-table-column label="排名" align="center" width="80px">
             <template #default="{ row, $index }">
               <div class="rank-badge" :class="{ 'first': $index === 0, 'second': $index === 1, 'third': $index === 2 }">
                 {{ $index + 1 }}
               </div>
             </template>
           </el-table-column>
           <el-table-column label="医生"  align="center">
             <template #default="{ row }">
               <div class="doctor-item flex align-center ">
                 <div class="avatar" :style="{ backgroundColor: getAvatarColor(row.initials) }">{{ row.initials }}</div>
                 <div class="doctor-info">
                   <div class="name">{{ row.name }}</div>
                   <div class="position">{{ row.position }}</div>
                 </div>
               </div>
             </template>
           </el-table-column>
           <el-table-column label="总分" align="center"  width="80px">
             <template #default="{ row }">
               <div class="score-badge">{{ row.score }}</div>
             </template>
           </el-table-column>
           <el-table-column label="趋势" align="center"  width="80px">
             <template #default="{ row }">
               <div :class="['trend-icon', row.trend === 'up' ? 'up' : row.trend === 'down' ? 'down' : 'equal']">
                 {{ row.trend === 'up' ? '↑' : row.trend === 'down' ? '↓' : '＝' }}
               </div>
             </template>
           </el-table-column>
         </el-table>
       </div>
      </div>
      <div class="right-box flex-auto flex flex-column " style="gap: 10px;border-radius: 15px">
        <div class="flex flex-column" style="padding: 10px;background-color: #FFFFFF;border-radius: 5px;height: 260px">
          <div>
             <div style="font-weight: bolder;color: #333333">个人绩效中心</div>
             <div style="color: #666666;font-size: 14px;margin-top: 5px;">李静 主治医师 | 工号：2023015</div>
          </div>
          <div class="flex flex-auto flex-column" style="padding: 10px;margin:10px 0;background-color: #eef0f1;border-radius: 5px;position:relative;">
            <div style="margin-bottom: 10px;position: absolute;top: 10px;left: 10px">绩效维度分析</div>
            <EchartsComponent :options="radarOption" class="flex-auto" style="background-color: #EEF0F1" />
          </div>

        </div>
        <div class="flex-auto flex flex-column" style="background-color: #FFFFFF;padding: 10px;border-radius: 5px;">
           <div style="font-weight: bolder;color: #333333">核心指标看板</div>
           <div class="flex-auto flex flex-column" style="margin-top: 10px;gap: 10px;">
            <!-------------------------->
             <div class="flex" style="gap: 20px;">
               <div class="flex-auto" style="padding: 10px 30px;border-radius: 10px;background-color: #EFF6FF">
                 <div class="flex justify-content-space-between align-center" style="color: #2345B1">
                   <div style="font-weight: bolder;color: #1E40AF">工作量与效率(30%)</div>
                   <div style="background-color: #DBEAFE;padding: 4px 10px;border-radius: 10px;color: #3857B9;font-size: 12px;font-weight: bolder">得分:36.8/40</div>
                 </div>
                 <div style="margin-top: 5px">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">门诊工作量 (小时)</div>
                     <div style="color: #22C55E"> <span style="font-weight: bolder;color: #000000">128</span> (+12%)</div>
                   </div>
                   <el-progress :percentage="128" color="#409EFF" :show-text=false stroke-width="8" />
                 </div>
                 <div style="margin-top: 5px">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">住院CMI值</div>
                     <div style="color: #22C55E"> <span style="font-weight: bolder;color: #000000">1.28</span> (+0.1)</div>
                   </div>
                   <el-progress :percentage="128" color="#409EFF" :show-text=false stroke-width="8" />
                 </div>
                 <div style="margin-top: 5px">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">手术量 (小时)</div>
                     <div style="color: #22C55E"> <span style="font-weight: bolder;color: #000000">18</span> (-2)</div>
                   </div>
                   <el-progress :percentage="128" color="#409EFF" :show-text=false stroke-width="8" />
                 </div>
               </div>
               <div class="flex-auto" style="padding: 10px 30px;border-radius: 10px;background-color: #F0FDF4">
                 <div class="flex justify-content-space-between align-center" style="color: #2345B1">
                   <div style="font-weight: bolder;color: #186636">医疗质量与安全(30%)</div>
                   <div style="background-color: #DCFCE7;padding: 4px 10px;border-radius: 10px;color: #247041;font-size: 12px;font-weight: bolder">得分:36.8/40</div>
                 </div>
                 <div style="margin-top: 5px">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">并发症发生率</div>
                     <div style="color: #1A8C7B"> <span style="font-weight: bolder;color: #000000">2.1%</span> (-0.5%)</div>
                   </div>
                   <el-progress :percentage="128" color="#22C55E" :show-text=false stroke-width="8" />
                 </div>
                 <div style="margin-top: 5px">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">手术部位感染率</div>
                     <div style="color: #1A8C7B"> <span style="font-weight: bolder;color: #000000">98%</span> (+3%)</div>
                   </div>
                   <el-progress :percentage="128" color="#22C55E" :show-text=false stroke-width="8" />
                 </div>
                 <div style="margin-top: 5px">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">抗菌药物使用强度</div>
                     <div style="color: #f30000"> <span style="font-weight: bolder;color: #000000">45 DDDS</span> (+5%)</div>
                   </div>
                   <el-progress :percentage="128" color="#22C55E" :show-text=false stroke-width="8" />
                 </div>
               </div>
             </div>
             <div class="flex" style="gap: 10px;">
               <div class="flex-auto" style="padding: 10px 30px;border-radius: 10px;background-color: #FAF5FF">
                 <div class="flex justify-content-space-between align-center" style="color: #2345B1">
                   <div style="font-weight: bolder;color: #6B21A8">资源消耗与效益(30%)</div>
                   <div style="background-color: #F3E8FF;padding: 4px 10px;border-radius: 10px;color: #A855F7;font-size: 12px;font-weight: bolder">得分:36.8/40</div>
                 </div>
                 <div style="margin-top: 5px">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">药占比</div>
                     <div style="color: #1A8C7B"> <span style="font-weight: bolder;color: #000000">23%</span> (-2%)</div>
                   </div>
                   <el-progress :percentage="128" color="#A855F7" :show-text=false stroke-width="8" />
                 </div>
                 <div style="margin-top: 5px">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">耗材占比</div>
                     <div style="color: #ff0000"> <span style="font-weight: bolder;color: #000000">18%</span> (+1%)</div>
                   </div>
                   <el-progress :percentage="128" color="#A855F7" :show-text=false stroke-width="8" />
                 </div>
                 <div style="margin-top: 5px">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">例均费用</div>
                     <div style="color: #1A8C7B"> <span style="font-weight: bolder;color: #000000">￥12800</span>(-￥500)</div>
                   </div>
                   <el-progress :percentage="128" color="#A855F7" :show-text=false stroke-width="8" />
                 </div>
               </div>
               <div class="flex-auto" style="padding: 10px 30px;border-radius: 10px;background-color: #FEFCE8">
                 <div class="flex justify-content-space-between align-center" style="color: #2345B1">
                   <div style="font-weight: bolder;color: #854D0E">学术发展与患者满意度(10%)</div>
                   <div style="background-color: #FEF9C3;padding: 4px 10px;border-radius: 10px;color: #8F5C1E;font-size: 12px;font-weight: bolder">得分:36.8/40</div>
                 </div>
                 <div style="margin-top: 5px">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">患者满意度</div>
                     <div style="color: #1A8C7B"> <span style="font-weight: bolder;color: #000000">96%</span> (+2%)</div>
                   </div>
                   <el-progress :percentage="128" color="#EAB308" :show-text=false stroke-width="8" />
                 </div>
                 <div style="margin-top: 5px">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">学术论文</div>
                     <div style="color: #1A8C7B"> <span style="font-weight: bolder;color: #000000">2篇</span> (+1)</div>
                   </div>
                   <el-progress :percentage="128" color="#EAB308" :show-text=false stroke-width="8" />
                 </div>
                 <div style="margin-top: 5px;">
                   <div class="flex align-center justify-content-space-between">
                     <div style="color: #000000;font-size: 14px">继续教育学分</div>
                     <div style="color: #1A8C7B"> <span style="font-weight: bolder;color: #000000">15分</span> (+3)</div>
                   </div>
                   <el-progress :percentage="128" color="#EAB308" :show-text=false stroke-width="8" />
                 </div>
               </div>
             </div>
             <!-------------------------->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
// 模拟数据
const doctorList = ref([
  { name: '王洋', initials: 'WY', position: '副主任医师', score: 92.5, trend: 'up' },
  { name: '李静', initials: 'LJ', position: '主治医师', score: 89.7, trend: 'up' },
  { name: '张松', initials: 'ZS', position: '主治医师', score: 87.2, trend: 'down' },
  { name: '陈伟', initials: 'CW', position: '主治医师', score: 85.6, trend: 'up' },
  { name: '黄燕', initials: 'HY', position: '主治医师', score: 83.9, trend: 'equal' },
  { name: '刘明', initials: 'LM', position: '主治医师', score: 82.4, trend: 'up' },
  { name: '王雪', initials: 'WX', position: '主治医师', score: 81.7, trend: 'down' },
  { name: '赵阳', initials: 'ZY', position: '主治医师', score: 80.5, trend: 'up' },
  { name: '钱浩', initials: 'QH', position: '主治医师', score: 79.8, trend: 'equal' },
  { name: '孙芳', initials: 'SF', position: '主治医师', score: 78.2, trend: 'down' }
])
const date = ref('');
// 雷达图配置
const radarOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    data: ['当前医生', '科室平均'],
    right: '10%', // 设置图例在右侧
    top: '50%', // 垂直居中
    orient: 'vertical', // 垂直排列
    textStyle: {
      fontSize: 12,
      color: '#333'
    }
  },
  radar: {
    indicator: [
      { name: '工作量与效率', max: 100 },
      { name: '学术发展与满意度', max: 100 },
      { name: '资源消耗与效益', max: 100 },
      { name: '医疗质量与安全', max: 100 }
    ],
    radius: '50%',
    center: ['50%', '50%'],
    splitNumber: 5,
    axisLine: {
      lineStyle: {
        color: '#000000' // 设置轴线颜色为红色
      }
    },
  },
  series: [
    {
      name: '当前医生',
      type: 'radar',
      areaStyle: { color: 'rgba(64, 158, 255, 0.2)' },
      lineStyle: { color: '#409EFF' },
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: { color: '#409EFF' },
      data: [
        { value: [90, 85, 75, 88], name: '当前医生' }
      ]
    },
    {
      name: '科室平均',
      type: 'radar',
      areaStyle: { color: 'rgba(54, 162, 115, 0.2)' },
      lineStyle: { color: '#36A273', type: 'dashed' },
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: { color: '#36A273' },
      data: [
        { value: [80, 75, 70, 82], name: '科室平均' }
      ]
    }
  ],
  backgroundColor: 'transparent'
})
// 获取头像背景色
const getAvatarColor = (initials) => {
  const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
  return colors[initials.charCodeAt(0) % colors.length]
}
const doctorName = ref('');
// 定义所有需要展示的数据
const metricsData = [
  {
    title: '工作量与效率 (30%)',
    class: 'workload',
    score: '36.8/40',
    items: [
      { label: '门诊工作量 (小时)', percentage: 100, status: 'success', value: '128 (+12%)' },
      { label: '住院CMI值', percentage: 100, status: 'success', value: '1.28 (+0.1)' },
      { label: '手术量 (小时)', percentage: 90, status: '', value: '18 (-2)' },
    ],
  },
  {
    title: '医疗质量与安全 (30%)',
    class: 'quality',
    score: '27.3/30',
    items: [
      { label: '并发症发生率', percentage: 100, status: 'success', value: '2.1% (-0.5%)' },
      { label: '手术部位感染率', percentage: 100, status: 'success', value: '98% (+3%)' },
      { label: '抗菌药物使用强度', percentage: 90, status: '', value: '45 DDDs (+5)' },
    ],
  },
  {
    title: '资源消耗与效益 (30%)',
    class: 'resource',
    score: '16.5/20',
    items: [
      { label: '药占比', percentage: 100, status: 'success', value: '23% (-2%)' },
      { label: '耗材占比', percentage: 90, status: 'success', value: '18% (+1%)' },
      { label: '例均费用', percentage: 100, status: '', value: '¥12,800 (-¥500)' },
    ],
  },
  {
    title: '学术发展与患者满意度 (10%)',
    class: 'academic',
    score: '8.7/10',
    items: [
      { label: '患者满意度', percentage: 100, status: 'success', value: '96% (+2%)' },
      { label: '学术论文', percentage: 100, status: 'success', value: '2篇 (+1)' },
      { label: '继续教育学分', percentage: 100, status: 'success', value: '15分 (+3)' },
    ],
  },
];


</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-col{
     padding: 0;
  }
  .el-card {
    border: none;
    border-radius: 10px;
  }
  .charts-common {
    height: 340px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .left-box{
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #333;

  .total-score {
    font-size: 14px;
    color: #999;
    background-color: #f5f7fa;
    padding: 4px 8px;
    border-radius: 4px;
  }
}
.el-table {
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

.el-table th {
  background-color: #f5f7fa;
  font-weight: 500;
  color: #999;
  font-size: 14px;
}

.el-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
}

.rank-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;

  margin: 0 auto;
}

.first {
  background-color: #409EFF;
}

.second {
  background-color: #67C23A;
}

.third {
  background-color: #E6A23C;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin-right: 8px;
}

.doctor-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.position {
  font-size: 12px;
  color: #999;
}

.score-badge {
  width: 56px;
  height: 24px;
  border-radius: 12px;
  margin: 0 auto;
  font-size: 14px;
  color: #347C4F;
  font-weight: bolder;
  background-color: #DCFCE7;
}

.trend-icon {
  font-size: 14px;
  color: #999;
}

.up {
  color: #409EFF;
}

.down {
  color: #F56C6C;
}

.equal {
  color: #999;
}

</style>
